<div class="hmtop">
    <!--顶部导航条 -->
    <div class="am-container header">
        @guest()
            <ul class="message-l">
                {{--如果没有登陆就显示下面的内容--}}
                <div class="topMessage">
                    <div class="menu-hd">
                        <a href="{{route('user.login')}}" target="_top" class="h" style="color: orangered">亲，请登录</a>
                        <a href="{{route('user.register')}}" target="_top">免费注册</a>
                    </div>
                </div>
            </ul>
        @endguest
            {{--如果当前用户已经登陆就显示下面的信息--}}
            <ul class="message-r">
                <div class="topMessage home">
                    <div class="menu-hd"><a href="{{route('site.index')}}" target="_top" class="h">商城首页</a></div>
                </div>
                @auth("web")
                <div class="topMessage my-shangcheng">
                    <div class="menu-hd MyShangcheng">
                        <a href="{{route('site.center.where','index')}}" target="_top">
                            <i class="am-icon-user am-icon-fw"></i>个人中心
                        </a>
                    </div>
                </div>
                <div class="topMessage mini-cart">
                    <div class="menu-hd">
                        <a id="mc-menu-hd" href="{{route('site.indexcart')}}" target="_top">
                            <i class="am-icon-shopping-cart  am-icon-fw"></i>
                            <span style="color: olivedrab">购物车</span>
                            <strong id="J_MiniCartNum" class="h" style="color: olivedrab">
                                {{\App\Models\Cart::where('user_id',auth()->id())->count()}}
                            </strong>
                        </a>
                    </div>
                </div>
                <div class="topMessage favorite">
                    <div class="menu-hd">
                        <a href="{{route('site.center.where','collect')}}" target="_top">
                            <i class="am-icon-heart am-icon-fw"></i>
                            <span>收藏夹</span>
                        </a>
                        <strong id="J_MiniCartNum" class="h" >
                            {{\App\Models\Collect::where('user_id',auth()->id())->get()->count()}}
                        </strong>
                    </div>
                </div>
                @endauth
            </ul>
    </div>

    <!--悬浮搜索框-->

    <div class="nav white">
        <div class="logoBig">
{{--            <li><img src="{{asset('/org/site')}}/images/logobig.png"/></li>--}}
            <li style="float: right">
                <img src="{{asset('/org/site')}}/logo/elephant.png" width="88px" height="72px"/>
            </li>
        </div>

        <div class="search-bar pr">
            <a name="index_none_header_sysc" href="#"></a>
            {{--如果搜索的时候使用post请求,那在post请求到的页面中使用f5刷新就会再次提交之前的表单,
                所以搜索使用get方式比较好--}}
            <form method="get" action="{{route('site.search')}}">
                <input id="searchInput" name="search_condition" type="text" placeholder="搜索" autocomplete="off" value="{{isset($search_condition)?$search_condition:''}}"
                style="color: darkgray">
                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button">
            </form>
            <script>
                //写个js当用户没有输入内容就点击搜索的时候提示用户输入内容再搜索
                $("#ai-topsearch").click(function () {
                    let search_condition = $("#searchInput").val();
                    if (search_condition == '') {
                        require(['hdjs'], function (hdjs) {
                            hdjs.swal({
                                text: "大哥,不写内容我咋搜?!",
                                button: false,
                                icon: 'warning'
                            })
                        })
                    }
                    else {
                        //进入到这个判断体说明用户已经填了要搜索的内容,这个时候就可以submit提交了
                        // $(this).parent("form").submit()
                        //不使用post请求,使用get方式请求搜索
                        location.href="{{route('site.search')}}"+"?search_condition="+search_condition;
                    }
                })
            </script>
            {{--热门搜索--}}
            <div class="dd-conent" style="display: flex;margin-top: 5px">
                <dd class=" selected" style="margin: 0 5px;font-size: 13px;color: orangered">热门搜索:</dd>

                <dd style="margin: 0 5px;">
                    <a href="#" style="font-size: 13px;color: red">松子</a>
                </dd>
                <dd style="margin: 0 5px;">
                    <a href="#" style="color: red;font-size: 13px">零食</a>
                </dd>
                <dd style="margin: 0 5px;">
                    <a href="#" style="color: red;font-size: 13px">水果</a>
                </dd>
            </div>
        </div>
    </div>
    <script>
        //可以在js中主动抓取页面中的元素并给抓取到的元素添加事件
        $(".dd-conent").find('a').click(function () {
            //先获取用户点击的热搜词的内容
            let hotword = $(this).text();
            //然后将热搜词赋值到searchInput搜索输入框中,并用js提交搜索form表单
            $("#searchInput").val(hotword).parent("form").submit();

        })
    </script>

    <div class="clear"></div>
</div>
